<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view :class="isFixed ? 'bottomPagesBox2' : 'bottomPagesBox'">
		<view class="topBox" @tap="scrollTOP" v-show="!isFixed">
			<view class="topBoxIcons"><uni-icons type="arrowup" color="#4B4D5D" size="16"></uni-icons></view>
			<view class="topBoxIconsText">TOP</view>
		</view>
		<view class="linkBox">
			<view class="linkBoxText" @tap="goCooperation">
				<view>{{ i18n.ctwfont21 }}</view>
				<view>{{ i18n.ctwfont21_1 }}</view>
			</view>
			<view class="henganBox"></view>
			<view class="linkBoxText" @tap="goCartoon">
				<view>{{ i18n.ctwfont22 }}</view>
				<view>{{ i18n.ctwfont22_1 }}</view>
			</view>
			<view class="henganBox"></view>
			<view class="linkBoxText" @tap="goProductIntroduction">{{ i18n.ctwfont23 }}</view>
			<view class="henganBox"></view>
			<view class="linkBoxText" @tap="goodsListPicture">{{ i18n.ctwfont26 }}</view>
			<view class="henganBox"></view>
			<view class="linkBoxText" @tap="productType">{{ i18n.ctwfont28 }}</view>
			<view class="henganBox"></view>
			<view class="linkBoxText" @tap="goFAQ">{{ i18n.ctwfont24 }}</view>
			<view class="henganBox"></view>
			<view class="linkBoxText" @tap="goBusinessCard">{{ i18n.ctwfont25 }}</view>
		</view>
		<!-- 小灰线 -->
		<!-- <view class="huiLine"></view> -->
		<!-- 		<view class="BottomBoxIcons">
			<view class="BottomIcons" v-for="(item, index) in iconList" :key="index"><uni-icons color="#fff" :type="item" size="18"></uni-icons></view>
		</view> -->
		<!-- 		<view class="appStoreOrGoogle">
			<view class="appStoreOrGoogleImg" style="margin-right: 20px;"><image style="width: 100%; height: 100%;" mode="scaleToFill" :src="src"></image></view>
			<view class="appStoreOrGoogleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" :src="src"></image></view>
		</view>
		<view class="lianxidianhua">
			<view>
				<text>Ins: 02-22222222</text>
				<text style="margin: 0 5px;">sss - sssss</text>
				<text>8:30 - 18:00</text>
			</view>
		</view> -->
		<!-- 小红线 -->
		<view class="honLine"></view>

		<view class="BottomBoxIcons">
			<!-- @tap="goApp(item)" -->
			<view class="BottomIcons" @tap="goApp(item)" v-for="(item, index) in iconList" :key="index">
				<image style="width: 30px; height: 30px;" mode="scaleToFill" :src="item.img"></image>
			</view>
		</view>
		<!-- <uni-icons color="#fff" :type="item" size="18"></uni-icons> -->
		<!-- 		<view class="bootmshangbiao">
			<text>@ dsadasdasdasddsad | dasdasdasdsadsdasdas.</text>
		</view> -->
	</view>
</template>

<script>
	import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	props: {
		isFixed: {
			type: Boolean,
			default: false
		}
	},
	data: function() {
		return {
			iconList: [
				{
					app: 'LINE',
					img: '/static/icon/AboutUs/2x/AboutUs20@2x.png'
				},
				{
					app: 'WX',
					img: '/static/icon/AboutUs/2x/AboutUs19@2x.png'
				},
				{
					app: 'FB',
					img: '/static/icon/AboutUs/2x/AboutUs18@2x.png'
				},
				{
					app: 'INS',
					img: '/static/icon/AboutUs/2x/AboutUs17@2x.png'
				},
				{
					app: 'TW',
					img: '/static/icon/AboutUs/2x/AboutUs16@2x.png'
				},
				{
					app: 'UT',
					img: '/static/icon/AboutUs/2x/AboutUs15@2x.png'
				}
			],
			src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
		};
	},
	computed: {
		i18n() {
			return this.$t('homeBox');
		}
	},
	created() {},
	methods: {
		// 回到顶部
		scrollTOP() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		// 合作
		goCooperation() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/cooperation/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/cooperation/index');
			// #endif
		},
		// 卡通
		goCartoon() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/cartoon/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/cartoon/index');
			// #endif
		},
		// 商品
		goProductIntroduction() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/productIntroduction/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/productIntroduction/index');
			// #endif
		},
		// FAQ
		goFAQ() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/FAQ/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/FAQ/index');
			// #endif
		},
		// 名片
		goBusinessCard() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/businessCard/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/businessCard/index');
			// #endif
		},
		// 运费计算
		goodsListPicture() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/goodsListPicture/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/goodsListPicture/index');
			// #endif
		},
		// 货品类型
		productType() {
			this.$emit('closeView', true);
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/productType/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/productType/index');
			// #endif
		},
		// 调起第三方app
		goApp(item) {
			if (plus.os.name == 'Android') {
				if (item.app === 'WX') {
					plus.runtime.openURL('weixin://', function(e) {
						// plus.runtime.openURL('https://mobile.amap.com/', function(err) {
						// 	console.log(err);
						// });
					});
					uni.setClipboardData({
						data: 'CTW物流',
						showToast: true,
						success: function() {}
					});
				} else if (item.app === 'FB') {
					// url = encodeURI('https://www.facebook.com/');
					plus.runtime.openURL('https://www.facebook.com/Cargo.CTW', function(e) {});
				} else if (item.app === 'INS') {
					// url = encodeURI('http://www.instagram.com/');
					plus.runtime.openURL('https://www.instagram.com/ctwcargo/', function(e) {});
				} else if (item.app === 'TW') {
					// url = encodeURI('https://www.twitter.com/');
					plus.runtime.openURL('https://mobile.twitter.com/ctw_cargo', function(e) {});
				} else if (item.app === 'LINE') {
					// url = encodeURI(url);
					plus.runtime.openURL('https://lin.ee/SzWjzaC', function(e) {});
				} else if (item.app === 'UT') {
					plus.runtime.openURL('https://www.youtube.com/channel/UCLHgBMZAscq3oZ6oh3fX1jQ', function(e) {});
				}
				// url = encodeURI(url);
				//plus.runtime.openURL(url,function(e){})调起手机APP应用
			} else {
				if (item.app === 'WX') {
					plus.runtime.openURL('weixin://', function(e) {
						// plus.runtime.openURL('https://mobile.amap.com/', function(err) {
						// 	console.log(err);
						// });
					});
					uni.setClipboardData({
						data: 'CTW物流',
						showToast: true,
						success: function() {}
					});
				} else if (item.app === 'FB') {
					// url = encodeURI('https://www.facebook.com/');
					plus.runtime.openURL('https://www.facebook.com/Cargo.CTW', function(e) {});
				} else if (item.app === 'INS') {
					// url = encodeURI('http://www.instagram.com/');
					plus.runtime.openURL('https://www.instagram.com/ctwcargo/', function(e) {});
				} else if (item.app === 'TW') {
					// url = encodeURI('https://www.twitter.com/');
					plus.runtime.openURL('https://mobile.twitter.com/ctw_cargo', function(e) {});
				} else if (item.app === 'LINE') {
					// url = encodeURI(url);
					plus.runtime.openURL('https://lin.ee/SzWjzaC', function(e) {});
				} else if (item.app === 'UT') {
					plus.runtime.openURL('https://www.youtube.com/channel/UCLHgBMZAscq3oZ6oh3fX1jQ', function(e) {});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bottomPagesBox {
	position: relative;
	padding: 8px 10px;
	// padding: 20px 0;
	box-sizing: border-box;
	background-color: #f1f1f1;
}
.bottomPagesBox2 {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 10px 10px;
	box-sizing: border-box;
	background-color: #f1f1f1;
}
.topBox {
	position: absolute;
	right: 30px;
	top: -12px;
	text-align: center;
	.topBoxIcons {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #929dc6;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.topBoxIconsText {
		// font-size: 10px;
		font-size: $uni-font-size-custom-a;
		color: #6e6f79;
	}
}
.linkBox {
	margin: 15px 0 10px 0;
	// padding: 0 5px;
	box-sizing: border-box;
	text-align: center;
	// font-size: 12px;
	font-size: $uni-font-size-custom-b;
	display: flex;
	justify-content: center;
	align-items: center;
	.linkBoxText {
		color: #424451;
		width: 80px;
		line-height: 15px;
		word-break: break-all; // 强制换行
	}
	.henganBox {
		width: 1px;
		height: 20px;
		margin: 0 3px;
		background-color: #a0a1a7;
	}
}
.huiLine {
	border-top: 2px solid #b0b0b0;
	margin: 15px auto;
}
.honLine {
	border-top: 2px solid #d80c24;
	margin: 10px auto;
}

.BottomBoxIcons {
	// width: 80%;
	display: flex;
	justify-content: center;
	.BottomIcons {
		margin-left: 10px;
		// border-radius: 50%;
		// background-color: #999aa1;
		padding: 3px;
		box-sizing: border-box;
	}
}
.appStoreOrGoogle {
	margin: 10px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.appStoreOrGoogleImg {
		width: 120px;
		height: 40px;
		border-radius: 5px;
		overflow: hidden;
	}
}
.lianxidianhua {
	display: flex;
	justify-content: center;
	color: #4d4f5b;
	// font-size: 14px;
	font-size: $uni-font-size-custom-d;
}
.bootmshangbiao {
	color: #8d8d8d;
	text-align: center;
	// font-size: 12px;
	font-size: $uni-font-size-custom-b;
	margin: 5px 0;
}
</style>
